<!-- 订单详情 -->
<template>
	<view class="detail_box">
		<!-- 商品信息 -->
		<view class="order_good x-f">
			<view class="img pr">
				<view class="type pa tc" v-if="detail.is_group">拼团</view>
				<image :src="detail.pic_url" mode=""></image>
			</view>

			<view class="good_detial">
				<view class="title">{{detail.spu_name}}</view>
				<view class="spec x-bc">
					<view class="">{{detail.display_string}}</view>
					<view class="">*{{detail.sale_count || 1}}</view>
				</view>
				<view class="score tr">
					<span style="font-size: 24rpx;">实付：</span>
					<span style="color: #FF2D1B;">{{detail.consume_points || 0}}</span>
					积分
					<span>+￥<span style="color: #FF2D1B;">{{detail.consume_amount || 0}}</span>元</span>
				</view>
			</view>
		</view>
		<!-- 收货信息 -->
		<view class="info pr">
			<view class="info_box x-start">
				<view class="info_title">收货信息</view>
				<view class="y-start info_box">
					<view class="x-f user">
						<view>{{detail.name || ''}}</view>
						<view class="iphone">{{detail.mobile || 0}}</view>
					</view>
					<view class="address">{{detail.address || ''}}</view>
				</view>
			</view>
			<view class="logistics x-start" style="padding-top: 20rpx;">
				<view class="info_title">物流单号</view>
				<view class="info_id">{{logisticsId || '111111111111'}}</view>
				<view class="info_copy pa" @click="copy(logisticsId)">复制</view>
				
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order">
			<view class="order_title">订单信息</view>
			<view class="order_box x-f">
				<view class="label">订单编号</view>
				<view class="value">{{detail.order_no}}</view>
			</view>
			<view class="order_box x-f">
				<view class="label">下单时间</view>
				<view class="value">{{detail.submit_time}}</view>
			</view>
			<view class="order_box x-f">
				<view class="label">支付方式</view>
				<view class="value">{{detail.pay_method}}</view>
			</view>
			<view class="order_box" v-if="detail.coupon_points">
				<view class="label di">优惠名称</view>
				<view class="value di">{{detail.coupon_name}}</view>
			</view>
			<view class="order_box x-f" v-if="detail.coupon_points">
				<view class="label">优惠积分</view>
				<view class="value">{{detail.coupon_points}}积分</view>
			</view>
			<view class="order_box x-f">
				<view class="label">订单状态</view>
				<view class="value"  v-if="detail.type != '已取消'">{{detail.type}}</view>
				<view class="value" v-if="detail.type == '已取消'" style="color: #ff0000;;">{{detail.type}}</view>
			</view>
			<view class="order_box ">
				<view class="label di">实付金额</view>
				<view class="value di">
					<view class="value_red di">{{detail.consume_points}}</view>积分 + <view class="value_point di">
						{{detail.consume_amount}}</view>元
				</view>
			</view>
			<view class="order_box x-f" v-if="detail.reject_reason.length">
				<view class="label">失败原因</view>
				<view class="value">{{detail.reject_reason}}</view>
			</view>
		</view>
		<!-- 拨打电话 -->
		<view class="call pf">
			<view class="callPhone pa" @tap.stop="callPhone">拨打电话</view>
		</view>
		<!-- 拨打电话 mobile-->
		<phone ref="phonePopup" :mobile="mobile"></phone>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				mobile: '',
				logisticsId: 782689162189711457
			}
		},
		computed: {
			// 获取vuex 数据
			...mapState({
				detail: state => state.order.orderDetail,
			}),
		},
		mounted() {
			if (this.detail.pay_method == 0) {
				this.detail.pay_method = '积分'
			}
			if (this.detail.pay_method == 1) {
				this.detail.pay_method = '积分 + 金额'
			}
			this.amendType();
		},
		methods: {
			// 复制物流单号
			copy(val) {
				uni.setClipboardData({
				    data: val.toString(),
				});
			},
			// 拨打电话
			callPhone() {
				this.$refs.phonePopup._data.showTel = true
				this.mobile = this.detail.shop_mobile
			},
			// 修改订单状态
			amendType() {
				if (this.detail.status == 0) {
					this.detail.type = '待支付'
				}
				if (this.detail.status == 1) {
					this.detail.type = '已支付'
				}
				if (this.detail.status == 2) {
					this.detail.type = '已发货'
				}
				if (this.detail.status == 3) {
					this.detail.type = '已签收'
				}
				if (this.detail.status == 4) {
					this.detail.type = '已取消'
				}
				if (this.detail.status == 5) {
					this.detail.type = '已完成'
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
